<template>
	<view>
		<!-- 遮罩层 -->
		<view v-if="modelValue" class="mask" @click="handleClose"></view>

		<!-- 弹出内容 -->
		<view class="modal" :class="{ show: modelValue }">
			<view class="inputBox">
				<ul>
					<li>
						<text>
							快递单号
						</text>
						<input type="text" placeholder="填写包裹上的快递单号" v-model="recipienData.trackingNumber" style="font-size: 24rpx;"/>
					</li>
					<li>
						<text>
							手机尾号
						</text>
						<input type="text" placeholder="用于确认取件身份的尾号" v-model="recipienData.phoneSuffix" style="font-size: 24rpx;"/>
					</li>

					<li>
						<text>
							备注
						</text>
						<input type="text" placeholder="补充快递信息和收货地址" v-model="recipienData.remarks" style="font-size: 24rpx;"/>
					</li>
					<li class="bntli">
						<button @click="fillRecipient">完成</button>
					</li>
				</ul>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { recipient } from '@/api/api'
import { useRecipientStore } from '@/store/recipient'
import { useUserStore } from '@/store/index'
import { defineProps, defineEmits } from 'vue'

const userStore = useUserStore()
const recipienData = useRecipientStore()

	const props = defineProps({
		modelValue: Boolean // 用于 v-model 绑定显示状态
	})

	const emit = defineEmits(['update:modelValue'])

	const handleClose = () => {
		emit('update:modelValue', false)
	}
	//基本信息完成
	const fillRecipient = () => {
		// recipienData.setRecipient()
	  recipienData.empty()
	}
	
	


</script>

<style scoped lang='scss'>
	*{
		box-sizing: border-box;
	}
	.mask {
		position: fixed;
		z-index: 999;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.4);
	}

	.modal {
		position: fixed;
		z-index: 1000;
		left: 0;
		bottom: -80%;
		width: 100%;
		max-height: 80%;
		background: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		transition: bottom 0.3s ease;
		padding: 24rpx;
		box-sizing: border-box;

		.inputBox {
			width: 100%;

			ul {
				margin: 0 auto;
				max-width: 800px;
				width: 100%;
				display: flex;
				flex-direction: column;
				padding: 0;

				li {
					background-color: #f1f1f1;
					border-radius: 15rpx;
					padding: 0 10rpx;
					margin: 20rpx auto;
					width: 100%;
					height: 80rpx;
					list-style: none;
					display: flex;
					justify-content: space-between;
					text{
						flex: 1.5;
						height: 100%;
						line-height: 80rpx;
						font-size: 20rpx
					}
					input{
						flex:8.5;
						height: 100%;
						margin-left: 20rpx;
					}

				}
				.bntli{
					width: 320rpx;
					background-color: transparent;
					button{
						width: 100%;
						height: 100%;
						line-height: 80rpx;
						text-align: center;
						background-color: #d0f5e7;
					}
				}
			}
		}
	}

	.modal.show {
		bottom: 0;
	}
</style>